<template>
	<div class="page">
		<Head navTitle="赛事详情" />
		<div class="game-vs-panel ">
			<div class="game-vs">
				<div class="vs-title">澳大利亚职业足球联赛</div>
				<div class="vs-flex flex-center flex-hc">
					<div class="vs-title">神户胜利船shenghushenglichuan</div>
					<div class="vs-card_bd">
						<div class="vs-value">反波胆 <span class="score">0-1</span></div>
						<div class="vs-time">2021 04-21 04:00</div>
					</div>
					<div class="vs-title">德岛漩涡dedaoxuanwo</div>
				</div>
			</div>
			<div class="popup-form">
				<div class="popup-cell popup-tab-cell">
					<div class="analy-select-btns flex-center flex-hc">
						<el-radio-group v-model="radioSelVal" @change="tabchange()">
							<el-radio v-for="(item,index) in selectTabs" :label="item.value" :key="index" border>{{item.text}}</el-radio>
						</el-radio-group>
					</div>
					<div class="btn-more" @click="goUrl('/game')">更多波坦</div>
				</div>
				<div class="popup-cell">
					<div class="p-label">交易金额</div>
					<div class="popup-cell_bd">
						<el-input @input="input" v-model="jprice" placeholder="请输入交易金额"></el-input>
					</div>
				</div>
				<div class="popup-cell">
					<div class="p-label">获利</div>
					<div class="popup-cell_bd">5.03%</div>
				</div>
				<div class="popup-cell">
					<div class="p-label">预估获利</div>
					<div class="popup-cell_bd flex-center flex-zBetween">
						<div class="k-value text-green">{{resultPrice}}</div>
						<div class="y-info">手续费0.5%</div>
					</div>
				</div>
				<div class="popup-cell">
					<div class="p-label">可选金额</div>
					<div class="popup-cell_bd flex-center">
						<div class="flex_bd">
							<div class="analy-select-btns flex-center">
								<el-radio-group v-model="radioPrice" @change="pricechange()">
									<el-radio v-for="(item,index) in selectPrice" :label="item" :key="index" border>{{item.text}}</el-radio>
								</el-radio-group>
							</div>
						</div>
						<div class="set-icon" @click="valVisible = true"><span class="iconfont icon-shezhi"></span>
						</div>
					</div>
				</div>
				<div class="popup-cell">
					<div class="p-label">可用余额</div>
					<div class="popup-cell_bd">
						<div class="k-value text-green">10,012,912.00</div>
					</div>
				</div>
			</div>
			<div  class="dialog-lg-footer">
				<el-button type="success" @click="resVisible = true">确 定</el-button>
				<el-button type="info" @click="setVisible = false">取 消</el-button>
			</div>
		</div>
		<van-popup v-model="valVisible" position="bottom" round  closeable>
			<div class="pop-m-title">设定金额</div>
			<div class="bs-val-form">
				<el-form ref="form" :model="form" label-position="top">
					<el-form-item label="第一 设定值diyishedingzhi：">
						<el-input v-model="form.value1" placeholder="请输入"></el-input>
					</el-form-item>
					<el-form-item label="第二 设定值diershedingzhi：">
						<el-input v-model="form.value2" placeholder="请输入"></el-input>
					</el-form-item>
					<el-form-item label="第二 设定值diershedingzhi：">
						<el-input v-model="form.value3" placeholder="请输入"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<div  class="dialog-lg-footer" style="padding: 20px 30px;">
				<el-button type="success" @click="valComfirm">确 定</el-button>
				<el-button type="info" @click="valVisible = false">取 消</el-button>
			</div>
		</van-popup>
		<van-popup v-model="resVisible" position="bottom" round  closeable>
			<div class="pop-m-title">交易成功</div>
			<div class="popup-form">
				<div class="popup-cell">
					<div class="p-label">队伍名称</div>
					<div class="popup-cell_bd">guangzhou city chongqingliangjiang athletlc</div>
				</div>
				<div class="popup-cell">
					<div class="p-label">交易金额</div>
					<div class="popup-cell_bd">200,000.00</div>
				</div>
				<div class="popup-cell">
					<div class="p-label">预估获利</div>
					<div class="popup-cell_bd">78,000.00</div>
				</div>
				<div class="popup-cell">
					<div class="p-label">注单号码</div>
					<div class="popup-cell_bd">2104160575471717</div>
				</div> 
			</div>
			<div class="dialog-lg-footer ">
				<el-button type="success" @click="goUrl('/settlement')">前往交易明细qianwangjiaoyimingxi</el-button>
			</div>
		</van-popup>
	</div>
</template>

<script>
	import { Toast } from 'vant';
	// @ is an alias to /src
	import Head from '@/components/Head.vue'
	export default {
		name: 'Home',
		components: {
			Head
		},
		data() {
			return {
				
					Counttime: 30 * 60 * 60 * 1000,
					tableData: [{
						prjtit: '0-0',
						pval: '10.34%',
						ptrade: '289,832,201.00'
					}, {
						prjtit: '0-0',
						pval: '10.34%',
						ptrade: '289,832,201.'
					}, {
						prjtit: '0-0',
						pval: '10.34%',
						ptrade: '289,832,.00'
					}, {
						prjtit: '0-0',
						pval: '10.34%',
						ptrade: '289,832,201.00'
					}, {
						prjtit: '0-0',
						pval: '10.34%',
						ptrade: '289,201.00'
					}, {
						prjtit: '0-0',
						pval: '10.34%',
						ptrade: '289,832,201.00'
					}, {
						prjtit: '0-0',
						pval: '10.34%',
						ptrade: '289,,201.00'
					}, ],
					count: 10,
					loading: false,
					
					// 弹出
					valVisible: false,
					setVisible: false,
					resVisible: false,
					form: {
						value1: '',
						value2: '',
						value3: '',
					},
					jprice:'',
					radioPrice:'',
					selectPrice: [{
							"value": 200000,
							"text": "+200000"
						},
						{
							"value": 1000000,
							"text": "+1000000",
						},
						{
							"value": 5000000,
							"text": "+5000000"
						},
						{
							"value": 6200000,
							"text": "全部"
						}
					],
					radioSelVal:1,
					selectTabs: [{
							"value": 1,
							"text": "正波"
						},
						{
							"value": 2,
							"text": "反波",
						},
					],
					resultPrice:0,
			};
		},
		computed: {
			noMore() {
				return this.count >= 20
			},
			disabled() {
				return this.loading || this.noMore
			},
		},
		methods: {
			load() {
				this.loading = true
				setTimeout(() => {
					for (let i = 0; i < 15; i++) {
						this.tableData.push({
							prjtit: '0-0',
							pval: '10.34%',
							ptrade: '289,832,201.00'
						});
					}
					this.loading = false
				}, 1000)
			},
			// table点击
			handle(row,column,cell,event) {
				console.log(row)
				console.log(column)
				console.log(cell)
				console.log(event)
				if(column.property == 'ptrade'){
					this.setVisible = true
				}else{
					this.$router.push('/gameDetailMs');
				}
			},
			openMs(row) {
				console.log(row.prjtit)
			},
			tabchange(){
				console.log(this.radioSelVal)
			},
			pricechange(){
				console.log(this.radioPrice)
				this.jprice = this.radioPrice.value
				this.resultPrice = parseFloat(this.radioPrice.value*.05).toFixed(2)
			},
			input(e){
				console.log()
				this.resultPrice = parseFloat(e*.05).toFixed(2)
			},
			
			goUrl(url){
				this.$router.push(url);
			},
			// 三个值设定
			valComfirm(){
				if(this.form.value1 == ''){
					Toast('请输入第一 设定值diyishedingzhi')
					return false
				}
				if(this.form.value2 == ''){
					Toast('请输入第二 设定值diyishedingzhi')
					return false
				}
				if(this.form.value3 == ''){
					Toast('请输入第三 设定值diyishedingzhi')
					return false
				}
				this.selectPrice[0].value = this.form.value1
				this.selectPrice[0].text = this.form.value1
				this.selectPrice[1].value = this.form.value2
				this.selectPrice[1].text = this.form.value2
				this.selectPrice[2].value = this.form.value3
				this.selectPrice[2].text = this.form.value3
				this.valVisible = false
			}
		}
	}
</script>
